<template>
  <!--  聊天 -->
  <div>
    <div class="threen-class" v-show="showcharoom">
      <center>
        <span class="spane-class-title">{{ userChat.urName }}的聊天</span>
      </center>
      <div class="chat-rooom-calss">
        <div v-for="chat in chats" :key="chat">
          <img
            v-if="userId == chat.userId"
            class="imgss you-img"
            :src="chat.user.urAvatar"
          />
          <img v-else class="imgss my-img" :src="chat.chatuser.urAvatar" />
          <div v-if="userId == chat.userId" class="youname">
            <spane class="you-spane">{{ chat.chatmsg }}</spane>
          </div>
          <div v-else class="myname">
            <span class="myname-spane">{{ chat.chatmsg }}</span>
          </div>
        </div>
        <div></div>
      </div>

      <div class="three-input-class">
        <input class="input-class-srf" v-model="value" />
        <el-button class="button-class-fs" type="success" @click="sendout" plain
          >发送</el-button
        >
      </div>
    </div>

    <!-- 添加好丫的列表 -->
    <div class="threen-class" v-if="showAddUser">
      <div class="friend-list-calss">
        <div class="charromm-list-class" v-if="list.length > 0">
          <ul>
            <li v-for="user in list" v-bind:key="user">
              <div class="charromm-list-div-calss">
                <img class="charromm-list-img-calss" :src="user.urAvatar" />
                <p class="charromm-list-p-class">{{ user.urName }}</p>
                <p class="charromm-list-p-bz-calss">
                  备注:我是{{ user.urName }}
                </p>

                <el-button
                  v-if="user.status == 0"
                  class="el-button-calss"
                  type="success"
                  @click="agreeUser(user.ruin)"
                  size="mini"
                  >同意</el-button
                >
                <spane class="el-button-calss spane-wenzi-calsss" v-else
                  >已同意</spane
                >
              </div>
            </li>
          </ul>
        </div>
        <center v-else><el-empty description="暂无申请记录"></el-empty></center>
      </div>
    </div>
  </div>
</template>

<script>
import admin from "@/api/admin";
import chat from "@/api/chartroom";
import { getUserId } from "@/utils/auth";
export default {
  data() {
    return {
      showAddUser: this.$showAddUser,
      list: [],
      socket: {},
      chatuserId: "",
      showcharoom: false,
      userChat: "",
      value: "",
      user: "",
      cahtText: [],
      userId: getUserId(),
      chats: [],
    };
  },
  created() {},
  computed() {},
  methods: {
    /* 接收到信息 */
    newMsg(data) {
      //chat.chatuser.urAvatar
      //  this.chats[0].userId
      var msg = {
        user: { urAvatar: this.user.urAvatar },
        chatmsg: data,
        chatuser: { urAvatar: this.chatuser.urAvatar },
      };
      console.log(msg);
      this.chats.push(msg);
      var datas = {
        chatmsg: data,
        userId: this.chatuserId,
        charuserId: getUserId(),
      };
      chat.savechatRoom(datas).then((res) => {
        this.chatuser(this.chatuserId, this.socket);
        this.value = "";
      });
    },
    /* 保存聊天记录 */
    savechatRoom(msg) {
      var data = {
        chatmsg: msg,
        userId: getUserId(),
        charuserId: this.chatuserId,
      };

      chat.savechatRoom(data).then((res) => {
        this.chatuser(this.chatuserId, this.socket);
        this.value = "";
      });
    },

    /* 发送聊天信息 */
    sendout() {
      this.socket.send(
        this.value + ":,:_" + this.chatuserId + "_::_" + getUserId()
      );
      var msg = {
        chatuser: { urAvatar: this.userChat.urAvatar },
        chatmsg: this.value,
        userId: this.userId,
        user: { urAvatar: this.user.urAvatar },
      };
      console.log(msg);
      this.chats.push(msg);
      this.value = "";
    },

    /* 用户聊天  回显之前的聊天记录*/
    chatuser(chatuserId, socket) {
      this.socket = socket;
      this.showcharoom = true;
      console.log(this.showcharoom);
      this.chatuserId = chatuserId;
      //console.log("chtroom,"+chatuserId,socket)
      chat.getcharRoom(chatuserId, getUserId()).then((res) => {
        // console.log(res)
        if (res.data.data) {
          this.chats = res.data.data;
        }

        this.userChat = res.data.userChat;
        this.user = res.data.user;
        //console
      });
      this.showAddUser = false;
    },

    /* 同意好友 */
    agreeUser(ruin) {
      let adduserId = ruin;
      admin.agreeUser(getUserId(), adduserId).then((res) => {
        this.updateshowAddUser();
        /* 同意成功过后  需要刷新好友列表  和同意发起添加好友的添加成功而且需要也刷新 发起好丫人的好丫列表*/
        this.$emit("notifyFriends", ruin);
      });
    },

    //显示好友列表
    updateshowAddUser() {
      this.showAddUser = true;
      this.showcharoom = false;
      admin.getAddUsers(getUserId()).then((res) => {
        if (res.data == undefined) {
          //  console.log("暂无数据")
        } else {
          this.list = res.data.data;
          //consoel.log("获取数据成功")
        }
      });
    },

    //关闭全部列表
    closeShow() {
      this.showcharoom = false;
      this.showAddUser = false;
    },
  },
};
</script>

<style>
.you-spane {
  position: relative;
}
.myname-spane {
  position: relative;
}
.myname {
  position: relative;
  width: 80px;
  left: 12%;
  bottom: 40px;
  font-size: 14px;
  line-height: 1.6;
  font-family: "微软雅黑";
  text-align: center;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  background-color: white;
}
.youname {
  position: relative;
  text-align: center;
  left: 62%;
  bottom: 40px;
  font-size: 14px;
  line-height: 1.6;
  font-family: "微软雅黑";
  width: 80px;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  background-color: lawngreen;
}
.you-img {
  position: relative;
  left: 80%;
  top: 10%;
}
.my-img {
  position: relative;
  right: 0%;
}
.imgss {
  position: relative;
  width: 10%;
  height: 10%;
  border-radius: 50%;
}
.my-chat {
  position: relative;
  display: inline;
}
.you-caht {
  position: relative;
  display: inline;
}
.spane-class-title {
  position: relative;
  left: 10%;
  top: 10px;
}
.you-img-calsss {
  position: relative;
  width: 5%;
  border-radius: 50%;
}
.you-class {
  position: relative;
  _height: 100px;
  min-height: 0px;
  text-align: center;
  width: 100px;
  left: 5%;
  bottom: 30%;
  background-color: rgba(17, 233, 150, 0.938);
}
.you-div-class {
  position: relative;
  top: 5px;
}

.wz-class {
  position: relative;
  _height: 100px;
  min-height: 0px;
  text-align: center;
  width: 100px;
  left: -20%;
  top: 20%;
  background-color: white;
}
.wz-div-class {
  position: relative;
  left: 30%;
}
.img-calsss {
  position: relative;
  width: 5%;
  top: 40px;
  border-radius: 50%;
  left: 20%;
}
.chat-rooom-calss div {
  flex: inherit;
}
.chat-rooom-calss {
  position: absolute;
  left: 25%;
  overflow-y: scroll;
  display: inline;
  height: 55%;
  width: 550px;
}
.friend-list-calss {
  position: relative;
  left: 30%;
}
.charromm-list-class {
  height: 500px;
  width: 70%;
}

.charromm-list-div-calss {
  width: 100%;
  height: 45px;
  float: left;
  margin-top: 2%;
}
.charromm-list-class ul li {
  display: inline;
}
.charromm-list-img-calss {
  position: relative;
  float: left;
  width: 10%;
  border-radius: 50%;
}
.charromm-list-p-class {
  margin-left: 15%;
  top: -20%;
  position: relative;
}
.charromm-list-p-bz-calss {
  margin-left: 15%;
  top: -30%;
  font-size: 8px;
  position: relative;
}

.el-button-calss {
  position: relative;
  top: -120%;
  left: 80%;
}
.spane-wenzi-calsss {
  color: rgb(163, 163, 163);
  font-size: 8px;
}
</style>